<template>
    <div class="login">
        <div class="login_pannel">

            <div class="userInfo">
                <span class="userNick">
                    .你好,心流
                </span>

            </div>

            <el-form :model="form">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="form.username" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" />
                </el-form-item>
            </el-form>

            <el-button class="ok_btn" @click="loginHandle">{{ isLogin ? '登录' : '注册' }}</el-button>

            <span class="loginTip" @click="() => isLogin = !isLogin">{{ isLogin ? '没有账号?' : '已有账号?'
            }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { loginApi, registerApi } from '@/api/user';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';
import { onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const isLogin = ref(true);
const userStore = useUserStore();

const form = ref({
    username: "",
    password: ""
})

const loginHandle = async () => {

    if (isLogin.value) {
        if (form.value.username == '' || form.value.password == '') {
            ElMessage.error("账号或密码不能为空");
            return;
        }
        const result = await loginApi({ username: form.value.username, password: form.value.password });
        if (result.code === 1) {
            //登录成功处理
            loginSuccess(result.data);
            //登录成功后完成必要的初始化操作
            //申请后端消息列表Api
        } else {
            ElMessage.error(result.msg ? result.msg : "登录失败");
        }
    } else {
        //注册状态
        //校验用户输入
        if (form.value.password == '') {
            ElMessage.error("密码不能为空");
            return;
        }

        const result = await registerApi({ username: form.value.username, password: form.value.password });
        if (result.code === 1) {
            //设置账号密码
            form.value.username = result.data;
            //切换登陆状态
            isLogin.value = !isLogin.value;
            ElMessage.success("注册成功!");
        } else {
            ElMessage.error(result.msg);
        }
    }
}

const loginSuccess = (jwt: string) => {
    //并且保存token
    userStore.set(jwt);
    //再缓存一份token
    sessionStorage.setItem("token", jwt);
    router.push("/home");
    ElMessage.success("登录成功");
}

const init = () => {
    const token = sessionStorage.getItem("token");
    if (token) {
        loginSuccess(token);
    }
}
init();
</script>

<style lang="scss" scoped>
.login {
    padding: 5%;

    .login_pannel {
        margin-top: 30%;
        display: flex;
        flex-flow: column;
        justify-content: center;

        .userInfo {
            margin: 30px;

            .userNick {
                font-size: 30px;
                font-weight: 500;
                margin-left: 10%;
            }
        }

        .ok_btn {
            background-color: rgb(122, 195, 255);
        }
    }

    .loginTip {
        font-size: 12px;
        color: blue;
        text-align: end;
        user-select: none;
    }
}
</style>
